<template>
  <div class="step1 l-form-list">
    <div class="form-blank-style">
      <mt-actionsheet :actions="actions" v-model="chooseImgVisible"></mt-actionsheet>
      <div class="tt tt-no-up-border">基本信息</div>
      <div class="ct cctt">
        <div class="input-item">
          <div class="itemBox">
            <div class="item item-title">
              <div class="label required ">业务线</div>
              <div class="no-select">{{formData.businessLineText}}</div>
            </div>
          </div>
        </div>
        <div class="upload-item">
          <div class="item item-img">
            <div class="item-tt required">门头照</div>
            <div class="item-ct">
              <div class="item-lft">
                <div
                  class="warn-text"
                >{{formData.businessLine == '2'?'需提供完整的停车场岗亭照片，建议包含：出口岗亭、道闸':'需要拍出包含完整商户名的门匾、门框（建议正对门店2米处拍摄）'}}</div>
                <div class="img-button">
                  <div
                    class="look-img"
                    @click="()=>lookFigure(formData.businessLine == '2'?'需提供完整的停车场岗亭照片，建议包含：出口岗亭、道闸':'需要拍出包含完整商户名的门匾、门框（建议正对门店2米处拍摄）','https://jindd-prod-image.oss-cn-beijing.aliyuncs.com/2019/04/26/16/277191556266754.png')"
                  >查看示例图</div>
                </div>
              </div>
              <div class="item-rt">
                <div
                  class="store-head-box border-dashed"
                  v-if="!formData.yzShopPhoto"
                  @click="chooseImg('yzShopPhoto')"
                >
                  <img class="imgOpcity" :src="require('../../assets/images/group.png')" />
                </div>
                <div class="store-head-box border-solid" v-else-if="formData.yzShopPhoto">
                  <img
                    :src="CommonUtil.imgUrlFormate(formData.yzShopPhoto,{w:'330',h:'206'})"
                    alt
                    @click="showImg(formData.yzShopPhoto)"
                  />
                  <span
                    class="sl-cwts"
                    @click="delImage('yzShopPhoto')"
                    v-if="query.code!='1000170311'"
                  ></span>
                </div>
                <div class="unload">{{ formData.yzCheckstandPic ? '门头照片' : '上传照片' }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="upload-item">
          <div class="item item-img">
            <div class="item-tt required">内景照</div>
            <div class="item-ct">
              <div class="item-lft">
                <div
                  class="warn-text"
                >{{formData.businessLine == '2'?'需提供停车场场内照片':'完整的门店内景照或者摊位全景照'}}</div>
                <div class="img-button">
                  <div
                    class="look-img"
                    @click="()=>lookFigure(formData.businessLine == '2'?'需提供停车场场内照片':'完整的门店内景照或者摊位全景照','https://jindd-prod-image.oss-cn-beijing.aliyuncs.com/2019/04/26/16/655581556267450.png')"
                  >查看示例图</div>
                </div>
              </div>
              <div class="item-rt">
                <div
                  class="store-head-box border-dashed"
                  v-if="!formData.yzIndoorPic"
                  @click="chooseImg('yzIndoorPic')"
                >
                  <img class="imgOpcity" :src="require('../../assets/images/group.png')" />
                </div>
                <div class="store-head-box border-solid" v-else-if="formData.yzIndoorPic">
                  <img
                    :src="CommonUtil.imgUrlFormate(formData.yzIndoorPic,{w:'330',h:'206'})"
                    alt
                    @click="showImg(formData.yzIndoorPic)"
                  />
                  <span
                    class="sl-cwts"
                    @click="delImage('yzIndoorPic')"
                    v-if="query.code!='1000170311'"
                  ></span>
                </div>
                <div class="unload">{{ formData.yzCheckstandPic ? '内景照片' : '上传照片' }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="upload-item">
          <div class="item item-img">
            <div class="item-tt required">收银台照</div>
            <div class="item-ct">
              <div class="item-lft">
                <div
                  class="warn-text"
                >{{formData.businessLine == '2'?'需提供完整的岗亭收费电脑、中央缴费处或无人值守收费设施照片':'需露出完整收银台，如果要申请云闪付，请保证收银台有云闪付logo的收款码或扫码机具'}}</div>
                <div class="img-button">
                  <div
                    class="look-img"
                    @click="()=>lookFigure(formData.businessLine == '2'?'需提供完整的岗亭收费电脑、中央缴费处或无人值守收费设施照片':'需露出完整收银台，如果要申请云闪付，请保证收银台有云闪付logo的收款码或扫码机具','https://jindd-prod-image.oss-cn-beijing.aliyuncs.com/2019/04/26/16/660701556267368.png')"
                  >查看示例图</div>
                </div>
              </div>
              <div class="item-rt">
                <div
                  class="store-head-box border-dashed"
                  v-if="!formData.yzCheckstandPic"
                  @click="chooseImg('yzCheckstandPic')"
                >
                  <img class="imgOpcity" :src="require('../../assets/images/group.png')" />
                </div>
                <div class="store-head-box border-solid" v-else-if="formData.yzCheckstandPic">
                  <img
                    :src="CommonUtil.imgUrlFormate(formData.yzCheckstandPic,{w:'330',h:'206'})"
                    alt
                    @click="showImg(formData.yzCheckstandPic)"
                  />
                  <span
                    class="sl-cwts"
                    @click="delImage('yzCheckstandPic')"
                    v-if="query.code!='1000170311'"
                  ></span>
                </div>
                <div class="unload">{{ formData.yzCheckstandPic?'收银台照片':'上传照片'}}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="input-item">
          <div class="itemBox">
            <div class="item">
              <div class="label required">商户名称</div>
              <inputClear
                :disabled="query.code== '1000170311'"
                class="input"
                @blur="fieldValidate('merchantName')"
                v-model="formData.merchantName"
                placeholder="请填写商户名称"
                :attr="{ maxlength: 30}"
              ></inputClear>
              <div :class=" formData.merchantName.length>0? 'check-btn-selected check-btn' : 'check-btn'" @click="checkRepeat">验重</div>
            </div>
          </div>
        </div>
        <div class="input-item">
          <div class="itemBox">
            <div class="item">
              <div class="label required">门店简称</div>
              <inputClear
                :disabled="query.code== '1000170311'"
                class="input"
                @blur="fieldValidate('alias')"
                v-model="formData.alias"
                placeholder="请填写门店简称"
                :attr="{ maxlength: 20}"
              ></inputClear>
            </div>
          </div>
        </div>
        <div class="input-item">
          <div class="itemBox">
            <div class="item">
              <div class="label required">商户类型</div>
              <div
                class="pick-value select no-select"
                v-if="query['code']=='1000170311'||query['code']=='1000170312'||query['code']=='1000170313'||query['page'] == 'ratesChangeApply' || initialData.isEntryStatus == 1 || query['rateToOpenPay']"
              >{{this.formData.merchantType?showIdName(merchantType.data,this.formData.merchantType):merchantType.tip}}</div>
              <div
                :class="`pick-value select ${this.formData.merchantType?'':'no-select'}`"
                @click="showPicker('merchantType')"
                v-else
              >{{this.formData.merchantType?showIdName(merchantType.data,this.formData.merchantType):merchantType.tip}}显</div>
              <i class="zhk-list_rarrow"></i>
              <awesome-picker
                ref="merchantType"
                :textTitle="merchantType.textTitle"
                :data="merchantType.data"
                :anchor="merchantType.anchor"
                @confirm="(v)=>handleConfirm('merchantType',v,merchantType.data)"
              ></awesome-picker>
            </div>
          </div>
        </div>
        <div class="input-item">
          <div class="itemBox">
            <div class="item">
              <div class="label required">经营类目</div>
              <div
                class="pick-value select no-select"
                v-if="formData.businessLine == '2'||query['code']=='1000170311'||query['code']=='1000170312'||query['code']=='1000170313'||query['page'] == 'ratesChangeApply' || initialData.isEntryStatus == 1 || query['rateToOpenPay']"
              >{{this.formData.mcc&&this.formData.mccName&&this.formData.mccRout?mccSpliceName:mcc.tip}}不</div>
              <div
                :class="`pick-value select ${this.formData.mcc&&this.formData.mccName&&this.formData.mccRout?'':'no-select'}`"
                v-else
                @click="showPicker('mcc')"
              >{{this.formData.mcc&&this.formData.mccName&&this.formData.mccRout?mccSpliceName:mcc.tip}}显</div>
              <i class="zhk-list_rarrow"></i>
              <awesome-picker
                ref="mcc"
                v-if="mccVisible"
                :textTitle="mcc.textTitle"
                :data="mcc.data"
                :anchor="mcc.anchor"
                @confirm="(v)=>handleConfirm('mcc',v,mcc.data)"
              ></awesome-picker>
            </div>
          </div>
        </div>
        <div class="input-item">
          <div class="itemBox">
            <div class="item">
              <div class="label required">手机号</div>
              <inputClear
                :disabled="query.code == '1000170311'"
                class="input"
                type="tel"
                @blur="fieldValidate('principalMobile')"
                v-model="formData.principalMobile"
                placeholder="请填写手机号"
                :attr="{ maxlength: 11}"
              ></inputClear>
            </div>
          </div>
        </div>
        <div class="input-item">
          <div class="itemBox">
            <div class="item">
              <div class="label required">客服电话</div>
              <inputClear
                :disabled="query.code == '1000170311'"
                class="input"
                type="tel"
                @blur="fieldValidate('servicePhoneNo')"
                v-model="formData.servicePhoneNo"
                placeholder="请填写客服电话"
                :attr="{ maxlength: 11}"
              ></inputClear>
            </div>
          </div>
        </div>
        <div class="input-item">
          <div class="itemBox">
            <div class="item">
              <div class="label required">邮箱</div>
              <inputClear
                :disabled="query.code == '1000170311'"
                class="input"
                @blur="fieldValidate('email')"
                v-model="formData.email"
                placeholder="请填写邮箱"
                :attr="{ maxlength: 64}"
              ></inputClear>
            </div>
          </div>
        </div>
        <div class="input-item">
          <div class="itemBox">
            <div class="item">
              <div class="label required">所属地区</div>
              <selectAreaPicker
                @handleOk="selectAreaPickerOk"
                type="storeArea"
                :initialData="storeAreaDefaultData"
                :detailData="initialData"
                :query="query"
              />
            </div>
          </div>
        </div>
        <div class="input-item-last input-item-lastlist">
          <div class="itemBox">
            <div class="item">
              <div class="label required">门店地址</div>
              <inputClear
                :disabled="query.code == '1000170311'"
                class="input"
                @blur="fieldValidate('address')"
                v-model="formData.address"
                placeholder="请填写门店地址"
                :attr="{ maxlength: 128}"
              ></inputClear>
            </div>
          </div>
        </div>
      </div>
      <div class="tt tt-body" v-if="formData.merchantType != '01'">主体资质</div>
      <div class="ct ct-body" v-if="formData.merchantType != '01'">
        <div class="upload-item">
          <div class="item">
            <div class="item-tt required">营业执照照片</div>
            <div class="item-ct">
              <div class="item-lft">
                <div class="warn-text">需文字清晰、边框完整拍复印件需要加盖印章</div>
                <div class="img-button">
                  <div
                    class="look-img look-img1"
                    @click="()=>lookFigure('需文字清晰、边框完整拍复印件需要加盖印章','https://jindd-prod-image.oss-cn-beijing.aliyuncs.com/2019/04/26/16/668911556267296.png')"
                  >查看示例图</div>
                </div>
              </div>
              <div class="item-rt">
                <template v-if="query.code||query['page'] == 'ratesChangeApply'">
                  <div
                    class="store-head-box border-dashed"
                    v-if="!formData.yzLicensePhoto"
                    @click="chooseImg('yzLicensePhoto')"
                  >
                    <img class="imgOpcity" :src="require('../../assets/images/group.png')" />
                  </div>
                  <div class="store-head-box border-solid" v-else-if="formData.yzLicensePhoto">
                    <img
                      :src="CommonUtil.imgUrlFormate(formData.yzLicensePhoto,{w:'330',h:'206'})"
                      alt
                      @click="showImg(formData.yzLicensePhoto)"
                    />
                    <span
                      class="sl-cwts"
                      @click="delImage('yzLicensePhoto')"
                      v-if="query.code!='1000170311'"
                    ></span>
                    <div class="unload">{{ formData.yzLicensePhoto ? '执照照片' : '上传照片' }}</div>
                  </div>
                </template>
                <template v-else>
                  <div
                    class="store-head-box border-dashed"
                    v-if="!formData.yzLicensePhoto"
                    @click="chooseImg('yzLicensePhoto','ocr_business_license')"
                  >
                    <img class="imgOpcity" :src="require('../../assets/images/group.png')" />
                  </div>
                  <div class="store-head-box border-solid" v-else-if="formData.yzLicensePhoto">
                    <img
                      :src="CommonUtil.imgUrlFormate(formData.yzLicensePhoto,{w:'330',h:'206'})"
                      alt
                      @click="showImg(formData.yzLicensePhoto)"
                    />
                    <span
                      class="sl-cwts"
                      @click="delImage('yzLicensePhoto')"
                      v-if="query.code!='1000170311'"
                    ></span>
                    
                  </div>
                </template>
                <div class="unload">{{ formData.yzLicensePhoto ? '执照照片' : '上传照片' }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="input-item">
          <div class="itemBox">
            <div class="item">
              <div class="label required">公司全称</div>
              <inputClear
                :disabled="query.code == '1000170311'"
                class="input"
                @blur="fieldValidate('merchantCompany')"
                v-model="formData.merchantCompany"
                placeholder="请填写公司全称"
                :attr="{ maxlength: 64}"
              ></inputClear>
            </div>
            <div class="warn-text">若营业执照名称为空或商户类型为自然人，填写：个体户+负责人姓名，例：“个体户李雷”</div>
          </div>
        </div>
        <div class="input-item">
          <div class="itemBox">
            <div class="item">
              <div class="label required">营业执照注册号</div>
              <inputClear
                :disabled="query.code=='1000170311'||query.code=='1000170312'||query.code=='1000170313'||query['page'] == 'ratesChangeApply'"
                class="input"
                @blur="fieldValidate('bussAuthNum')"
                v-model="formData.bussAuthNum"
                placeholder="请填营业执照注册号"
                :attr="{ maxlength: 18}"
              ></inputClear>
            </div>
          </div>
        </div>
        <div class="input-item">
          <div class="itemBox">
            <div class="item">
              <div class="label required">营业执照注册地址</div>
              <inputClear
                :disabled="query.code == '1000170311'"
                class="input"
                @blur="fieldValidate('yzLicenseRegisterAddress')"
                v-model="formData.yzLicenseRegisterAddress"
                placeholder="请填营业执照注册地址"
                :attr="{ maxlength: 50}"
              ></inputClear>
            </div>
          </div>
        </div>
        <div class="input-item">
          <div class="itemBox">
            <div class="item">
              <div class="label required">营业执照有效期</div>
              <div
                class="pick-value select no-select"
                v-if="query.code=='1000170311'"
              >{{this.formData.licenseExpireStart && this.formData.licenseExpire?changeMoment(this.formData.licenseExpireStart) + ' 至 ' + (this.formData.licenseExpire == '29991231'?'长期':(this.formData.licenseExpire + '年')):licenseExpireStart.tip}}</div>
              <div
                :class="`pick-value select ${this.formData.licenseExpireStart && this.formData.licenseExpire?'':'no-select'}`"
                @click="showPeriod('licenseExpireStart')"
                v-else
              >{{this.formData.licenseExpireStart && this.formData.licenseExpire?changeMoment(this.formData.licenseExpireStart) + ' 至 ' + (this.formData.licenseExpire == '29991231'?'长期':(this.formData.licenseExpire + '年')):licenseExpireStart.tip}}</div>
              <i class="zhk-list_rarrow"></i>
              <mt-datetime-picker
                ref="licenseExpireStart"
                type="date"
                :startDate="new Date('1971-01-01')"
                :endDate="new Date()"
                v-model="licenseExpireStartValue"
                @confirm="(v)=>showPeriod('licenseExpire','licenseExpireStart',v)"
              ></mt-datetime-picker>
              <!-- <awesome-picker ref="licenseExpireStart" type="date" :textTitle="licenseExpireStart.textTitle"  :anchor="licenseExpireStart.anchor"  @confirm="(v)=>showPeriod('licenseExpire','licenseExpireStart',v)">
              </awesome-picker>-->
              <awesome-picker
                ref="licenseExpire"
                :textTitle="licenseExpire.textTitle"
                :data="licenseExpire.data"
                :anchor="licenseExpire.anchor"
                @cancel="()=>periodCancel('licenseExpireStart')"
                @confirm="(v)=>periodConfirm('licenseExpire',v,licenseExpire.data,'licenseExpireStart')"
              ></awesome-picker>
            </div>
          </div>
        </div>
        <div
          v-if="formData.merchantType != '01'"
          :class="formData.licenseType == '0'?'input-item':'input-item-last input-item-last-last'"
        >
          <div class="itemBox">
            <div class="item">
              <div class="label required">是否三证合一</div>
              <div
                class="pick-value select no-select"
                v-if="query.code=='1000170311'"
              >{{this.formData.licenseType?showIdName(licenseType.data,this.formData.licenseType):licenseType.tip}}</div>
              <div
                :class="`pick-value select ${this.formData.licenseType?'':'no-select'}`"
                @click="showPicker('licenseType')"
                v-else
              >{{this.formData.licenseType?showIdName(licenseType.data,this.formData.licenseType):licenseType.tip}}</div>
              <i class="zhk-list_rarrow"></i>
              <awesome-picker
                ref="licenseType"
                :textTitle="licenseType.textTitle"
                :data="licenseType.data"
                :anchor="licenseType.anchor"
                @confirm="(v)=>handleConfirm('licenseType',v,licenseType.data)"
              ></awesome-picker>
            </div>
          </div>
        </div>
        <div v-if="formData.licenseType == '0'">
          <div class="upload-item">
            <div class="item">
              <div class="item-tt required">税务登记证</div>
              <div class="item-ct">
                <div class="item-lft">
                  <div class="warn-text"></div>
                  <div class="img-button">
                    <div class="look-img"></div>
                  </div>
                </div>
                <div class="item-rt">
                  <div
                    class="store-head-box border-dashed"
                    v-if="!formData.yzImgTaxReg"
                    @click="chooseImg('yzImgTaxReg')"
                  >
                    <img class="imgOpcity" :src="require('../../assets/images/tongyong.png')" />
                  </div>
                  <div class="store-head-box border-solid" v-else-if="formData.yzImgTaxReg">
                    <img
                      :src="CommonUtil.imgUrlFormate(formData.yzImgTaxReg,{w:'330',h:'206'})"
                      alt
                      @click="showImg(formData.yzImgTaxReg)"
                    />
                    <span
                      class="sl-cwts"
                      @click="delImage('yzImgTaxReg')"
                      v-if="query.code!='1000170311'"
                    ></span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div :class="formData.licenseType == '0'?'upload-item-last':'upload-item'">
            <div class="itemBox">
              <div class="item">
                <div class="item-tt required">组织机构代码证照片</div>
                <div class="item-ct">
                  <div class="item-lft">
                    <div class="warn-text"></div>
                    <div class="img-button">
                      <div class="look-img"></div>
                    </div>
                  </div>
                  <div class="item-rt">
                    <div
                      class="store-head-box border-dashed"
                      v-if="!formData.yzPrgPhoto"
                      @click="chooseImg('yzPrgPhoto')"
                    >
                      <img class="imgOpcity" :src="require('../../assets/images/tongyong.png')" />
                    </div>
                    <div class="store-head-box border-solid" v-else-if="formData.yzPrgPhoto">
                      <img
                        :src="CommonUtil.imgUrlFormate(formData.yzPrgPhoto,{w:'330',h:'206'})"
                        alt
                        @click="showImg(formData.yzPrgPhoto)"
                      />
                      <span
                        class="sl-cwts"
                        @click="delImage('yzPrgPhoto')"
                        v-if="query.code!='1000170311'"
                      ></span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="tt tt-body">{{this.principalNameLb(formData.merchantType)}}信息</div>
      <div class="ct ct-last ct-body">
        <div class="upload-item">
          <div class="item">
            <div class="item-tt required">身份证正面照</div>
            <div class="item-ct">
              <div class="item-lft">
                <div class="warn-text">请注意证件上的文字能够清晰可见</div>
                <div class="img-button">
                  <div
                    class="look-img"
                    @click="()=>lookFigure('请注意证件上的文字能够清晰可见','https://jindd-prod-image.oss-cn-beijing.aliyuncs.com/2019/04/26/16/312941556267257.png')"
                  >查看示例图</div>
                </div>
              </div>
              <div class="item-rt">
                <template v-if="query.code||query['page'] == 'ratesChangeApply'">
                  <div
                    class="store-head-box border-dashed"
                    v-if="!formData.yzCertPhotoa"
                    @click="chooseImg('yzCertPhotoa')"
                  >
                    <img class="imgOpcity" :src="require('../../assets/images/group.png')" />
                  </div>
                  <div class="store-head-box border-solid" v-else-if="formData.yzCertPhotoa">
                    <img
                      :src="CommonUtil.imgUrlFormate(formData.yzCertPhotoa,{w:'330',h:'206'})"
                      alt
                      @click="showImg(formData.yzCertPhotoa)"
                    />
                    <span
                      class="sl-cwts"
                      @click="delImage('yzCertPhotoa')"
                      v-if="query.code!='1000170311'"
                    ></span>
                  </div>
                  <div class="unload">{{ formData.yzLicensePhoto ? '执照照片' : '上传照片' }}</div>
                </template>
                <template v-else>
                  <div
                    class="store-head-box border-dashed"
                    v-if="!formData.yzCertPhotoa"
                    @click="chooseImg('yzCertPhotoa','ocr_idcard_front')"
                  >
                    <img class="imgOpcity" :src="require('../../assets/images/group.png')" />
                  </div>
                  <div class="store-head-box border-solid" v-else-if="formData.yzCertPhotoa">
                    <img
                      :src="CommonUtil.imgUrlFormate(formData.yzCertPhotoa,{w:'330',h:'206'})"
                      alt
                      @click="showImg(formData.yzCertPhotoa)"
                    />
                    <span
                      class="sl-cwts"
                      @click="delImage('yzCertPhotoa')"
                      v-if="query.code!='1000170311'"
                    ></span>
                  </div>
                  <div class="unload">{{ formData.yzLicensePhoto ? '执照照片' : '上传照片' }}</div>
                </template>
              </div>
            </div>
          </div>
        </div>
        <div class="upload-item">
          <div class="item item-body">
            <div class="item-tt required">身份证反面照</div>
            <div class="item-ct">
              <div class="item-lft">
                <div class="warn-text">请注意证件上的文字能够清晰可见</div>
                <div class="img-button">
                  <div
                    class="look-img"
                    @click="()=>lookFigure('请注意证件上的文字能够清晰可见','https://jindd-prod-image.oss-cn-beijing.aliyuncs.com/2019/04/26/16/825891556267271.png')"
                  >查看示例图</div>
                </div>
              </div>
              <div class="item-rt">
                <template v-if="query.code||query['page'] == 'ratesChangeApply'">
                  <div
                    class="store-head-box border-dashed"
                    v-if="!formData.yzCertPhotob"
                    @click="chooseImg('yzCertPhotob')"
                  >
                    <img class="imgOpcity" :src="require('../../assets/images/group.png')" />
                  </div>
                  <div class="store-head-box border-solid" v-else-if="formData.yzCertPhotob">
                    <img
                      :src="CommonUtil.imgUrlFormate(formData.yzCertPhotob,{w:'330',h:'206'})"
                      alt
                      @click="showImg(formData.yzCertPhotob)"
                    />
                    <span
                      class="sl-cwts"
                      @click="delImage('yzCertPhotob')"
                      v-if="query.code!='1000170311'"
                    ></span>
                  </div>
                </template>
                <template v-else>
                  <div
                    class="store-head-box border-dashed"
                    v-if="!formData.yzCertPhotob"
                    @click="chooseImg('yzCertPhotob','ocr_idcard_back')"
                  >
                    <img class="imgOpcity" :src="require('../../assets/images/group.png')" />
                  </div>
                  <div class="store-head-box border-solid" v-else-if="formData.yzCertPhotob">
                    <img
                      :src="CommonUtil.imgUrlFormate(formData.yzCertPhotob,{w:'330',h:'206'})"
                      alt
                      @click="showImg(formData.yzCertPhotob)"
                    />
                    <span
                      class="sl-cwts"
                      @click="delImage('yzCertPhotob')"
                      v-if="query.code!='1000170311'"
                    ></span>
                  </div>
                </template>
                <div class="unload">{{ formData.yzLicensePhoto ? '身份证反面' : '上传照片' }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="upload-item" v-if="formData.merchantType == '01'">
          <div class="item">
            <div class="item-tt required">手持身份证照</div>
            <div class="item-ct">
              <div class="item-lft">
                <div class="warn-text">需清晰展示人物五官及身份证正面信息</div>
                <div class="img-button">
                  <div
                    class="look-img"
                    @click="()=>lookFigure('需清晰展示人物五官及身份证正面信息','https://jindd-prod-image.oss-cn-beijing.aliyuncs.com/2019/04/26/16/626151556267409.png')"
                  >查看示例图</div>
                </div>
              </div>
              <div class="item-rt">
                <div
                  class="store-head-box border-dashed"
                  v-if="!formData.yzImgIdcardHolding"
                  @click="chooseImg('yzImgIdcardHolding')"
                >
                  <img class="imgOpcity" :src="require('../../assets/images/tongyong.png')" />
                </div>
                <div class="store-head-box border-solid" v-else-if="formData.yzImgIdcardHolding">
                  <img
                    :src="CommonUtil.imgUrlFormate(formData.yzImgIdcardHolding,{w:'330',h:'206'})"
                    alt
                    @click="showImg(formData.yzImgIdcardHolding)"
                  />
                  <span
                    class="sl-cwts"
                    @click="delImage('yzImgIdcardHolding')"
                    v-if="query.code!='1000170311'"
                  ></span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="input-item">
          <div class="itemBox">
            <div class="item">
              <div class="label required">姓名</div>
              <inputClear
                :disabled="query.code=='1000170311'||query.code=='1000170312'||query.code=='1000170313'||query['page'] == 'ratesChangeApply' || initialData.isEntryStatus == 1 || query['rateToOpenPay']"
                class="input"
                @blur="fieldValidate('principalPerson')"
                v-model="formData.principalPerson"
                :placeholder="namePlaceholder"
                :attr="{ maxlength: 10}"
              ></inputClear>
            </div>
          </div>
        </div>
        <div class="input-item">
          <div class="itemBox">
            <div class="item">
              <div class="label required">身份证号</div>
              <inputClear
                :disabled="query.code=='1000170311'||query.code=='1000170312'||query.code=='1000170313'||query['page'] == 'ratesChangeApply' || initialData.isEntryStatus == 1 || query['rateToOpenPay']"
                class="input"
                @blur="fieldValidate('principalCertno')"
                v-model="formData.principalCertno"
                :placeholder="idCardPlaceholder"
                :attr="{ maxlength: 18}"
              ></inputClear>
            </div>
          </div>
        </div>
        <div class="input-item-last input-item-last-last">
          <div class="itemBox">
            <div class="item">
              <div class="label required">身份证有效期</div>
              <div
                class="pick-value select no-select"
                v-if="query.code=='1000170311'"
              >{{this.formData.legalIdnumExpireStart && this.formData.legalIdnumExpire?changeMoment(this.formData.legalIdnumExpireStart) + ' 至 ' + (this.formData.legalIdnumExpire == '29991231'?'长期':(this.formData.legalIdnumExpire + '年')):legalIdnumExpireStart.tip}}</div>
              <div
                :class="`pick-value select ${this.formData.legalIdnumExpireStart && this.formData.legalIdnumExpire?'':'no-select'}`"
                @click="showPeriod('legalIdnumExpireStart')"
                v-else
              >{{this.formData.legalIdnumExpireStart && this.formData.legalIdnumExpire?changeMoment(this.formData.legalIdnumExpireStart) + ' 至 ' + (this.formData.legalIdnumExpire == '29991231'?'长期':(this.formData.legalIdnumExpire + '年')):legalIdnumExpireStart.tip}}</div>
              <i class="zhk-list_rarrow"></i>
              <mt-datetime-picker
                ref="legalIdnumExpireStart"
                type="date"
                :startDate="new Date('1971-01-01')"
                :endDate="new Date()"
                v-model="legalIdnumExpireStartValue"
                @confirm="(v)=>showPeriod('legalIdnumExpire','legalIdnumExpireStart',v)"
              ></mt-datetime-picker>
              <!-- <awesome-picker ref="legalIdnumExpireStart" type="date"  :textTitle="legalIdnumExpireStart.textTitle"  :anchor="legalIdnumExpireStart.anchor"  @confirm="(v)=>showPeriod('legalIdnumExpire','legalIdnumExpireStart',v)">
              </awesome-picker>-->
              <awesome-picker
                ref="legalIdnumExpire"
                :textTitle="legalIdnumExpire.textTitle"
                :data="legalIdnumExpire.data"
                :anchor="legalIdnumExpire.anchor"
                @cancel="()=>periodCancel('legalIdnumExpireStart')"
                @confirm="(v)=>periodConfirm('legalIdnumExpire',v,legalIdnumExpire.data,'legalIdnumExpireStart')"
              ></awesome-picker>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="sumbmit">
      <mt-button class="btn" type="primary" @click="submit">下一步</mt-button>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { DatetimePicker, Toast, MessageBox, Picker, Popup } from "mint-ui";
import jsBridge from "../../tools/jsBridge";
import inputClear from "../../components/inputClear/inputClear";
import selectAreaPicker from "./selectAreaPicker";
import AwesomePicker from "vue-awesome-picker";
import moment from 'moment';
Vue.use(AwesomePicker);
export default {
  name: "openPaymentStep1",
  data() {
    return {
      moment: moment,
      legalIdnumExpireStartValue: '',
      licenseExpireStartValue: '',
      //选择照片配置
      CommonUtil: CommonUtil,
      actions: [],
      chooseImgVisible: false,
      //经营类目拼接字段
      mccSpliceName: '',
      mccVisible: true,
      //门店区域拼接字段
      storeAreaName: '',
      storeAreaDefaultData: {
        province: '',
        provinceName: '',
        city: '',
        cityName: '',
        district: '',
        districtName: '',
      },
      formData: {
        businessLine: "",
        businessLineText: "",
        yzShopPhoto: '',//门头照
        yzIndoorPic: '',//内景照
        yzCheckstandPic: '',//收银台照
        merchantName: '',//商户名称
        alias: '',//门店简称
        mcc: '',//经营类目
        mccName: '',//经营类目名称
        mccRout: '',
        principalMobile: '',//手机号
        servicePhoneNo: '',//客服电话
        email: '',//邮箱
        province: '',//省code
        provinceName: '',//省name
        city: '',//市code
        cityName: '',//市name
        district: '',//区code
        districtName: '',//区name
        address: '',//门店地址
        merchantType: '03',//商户类型
        yzLicensePhoto: '',//营业执照照片
        merchantCompany: '',//公司全称
        bussAuthNum: '',//营业执照注册号
        yzLicenseRegisterAddress: '',//营业执照注册地址
        licenseExpireStart: '',//营业执照有效期开始时间
        licenseExpire: '',//营业执照有效期年限
        licenseType: '1',//是否三证合一
        yzImgTaxReg: '',//税务登记证照片
        yzPrgPhoto: '',//组织机构代码证照片
        yzCertPhotoa: '',//身份证正面照
        yzCertPhotob: '',//身份证反面照
        yzImgIdcardHolding: '',//手持身份证正面照
        principalPerson: '',//姓名
        principalCertno: '',//身份证号
        legalIdnumExpireStart: '',//身份证有效期开始时间
        legalIdnumExpire: '',//身份证有效期年限
        principalCertType: '01'//证件类型
      },
      ocrData: {
        businessLicenseOcr: '',//注册号
        licenseRegisterAddressOcr: '',//注册地址
        companyNameOcr: '',//公司名称
        licenseExpireStartOcr: '',//公司注册日期
        licenseExpireOcr: '',//营业期限终止日期
        businessOperatorNameOcr: '',//公司法人
        businessTypeOcr: '',//公司类型
        businessAddressOcr: '',//公司地址
        businessCapitalOcr: '',//注册资本
        businessOcr: '',//经营范围
        idcardOcr: '',//身份证号
        idcardNameOcr: '',//姓名
        idcardNationalityOcr: '',//民族
        idcardSexOcr: '',//性别
        idcardBirthOcr: '',//出生日期
        idcardAddressOcr: '',//地址信息
        idcardValidStartDateOcr: '',//有效期起始时间
        idcardValidEndDateOcr: '',//有效期结束时间
        idcardIssueOcr: '',//签发机关
      },
      namePlaceholder: "请填写法人姓名",//姓名Placeholder
      idCardPlaceholder: "请填写法人身份证号",//身份证号Placeholder
      //经营类目
      mcc: {
        tip: "请选择",
        anchor: [0],
        textTitle: "经营类目",
        data: []
      },
      //商户类型
      merchantType: {
        tip: "请选择",
        anchor: [0],
        textTitle: "请选择商户类型",
        data: []
      },
      //营业执照有效期
      licenseExpireStart: {
        tip: "请选择",
        anchor: [],
        textTitle: "营业执照有效期",
      },
      //营业执照有效期使用年限
      licenseExpire: {
        anchor: [],
        textTitle: "使用年限",
        data: []
      },
      //是否三证合一
      licenseType: {
        tip: "请选择",
        anchor: [0],
        textTitle: "是否三证合一",
        data: [{ key: '1', value: '是' }, { key: '0', value: '否' }]
      },
      //身份证有效期
      legalIdnumExpireStart: {
        tip: "请选择",
        anchor: [],
        textTitle: "身份证有效期",
      },
      //身份证有效期使用年限
      legalIdnumExpire: {
        anchor: [],
        textTitle: "使用年限",
        data: []
      },
    };
  },
  props: {
    initialData: Object,
    dictionaryData: Object,
    query: Object,
  },
  watch: {
    detailModel(newVal, oldVal) {
      if (JSON.stringify(newVal) != '{}') {
        this.initialMerChantData(newVal);
        this.getMccData();
      }
    },
    formData: {
      handler(val) {
        const backData = {
          detailModel: val
        };
        this.$emit("backDataModel", backData);
      },
      deep: true
    },
    dictionaryData: {
      handler(val) {
        if (JSON.stringify(val) != '{}') {
          this.merchantType.data = this.repeatPickerData(val.merchantType);
          this.legalIdnumExpire.data = this.repeatPickerData(val.iDCardExpire);
          this.licenseExpire.data = this.repeatPickerData(val.licenseExpire);
        }
      },
      deep: true
    },
    initialData: {
      handler(val) {
        if (JSON.stringify(val) != '{}') {
          this.formData.businessLine = this.initialData.businessLine;
          this.loadInitData();
        }
      },
      deep: true
    },
    "initialData.businessLine"(val) {
      if (val == '2') {
        this.formData.merchantName = "";//停车业务线的商户名称不自动赋值，将其清空，可以手动填写
      }
    }
  },
  computed: {
    detailModel() {
      return this.initialData.detailModel
    }
  },
  mounted() {
    //初始化
    if (JSON.stringify(this.dictionaryData) != '{}') {
      this.merchantType.data = this.repeatPickerData(this.dictionaryData.merchantType);
      this.legalIdnumExpire.data = this.repeatPickerData(this.dictionaryData.iDCardExpire);
      this.licenseExpire.data = this.repeatPickerData(this.dictionaryData.licenseExpire);
    }
    if (JSON.stringify(this.initialData.detailModel) != '{}' && this.initialData.detailModel) {
      this.initialMerChantData(this.initialData.detailModel);
      this.getMccData();
    }
    if (JSON.stringify(this.initialData) != '{}' && this.initialData) {
      this.formData.businessLine = this.initialData.businessLine;
      if (this.formData.businessLine == '2') {
        this.formData.merchantName = "";//停车业务线的商户名称不自动赋值，将其清空，可以手动填写
      }
    }
    console.log(initialData, dictionaryData, query, 'aaaaaaaaaaaaaaaaaaaaaa');
  },
  methods: {
    //处理picker数据key value 形式
    repeatPickerData(data) {
      return data.map((item, index) => {
        return {
          key: item.code,
          value: item.name
        }
      })
    },
    //初始化进件返回数据
    initialMerChantData(data) {
      for (let key in data) {
        for (let formKey in this.formData) {
          if (key == formKey) {
            this.formData[formKey] = data[key]
          }
        }
      }
      this.storeAreaDefaultData.province = this.formData.province || '';
      this.storeAreaDefaultData.provinceName = this.formData.provinceName || '';
      this.storeAreaDefaultData.city = this.formData.city || '';
      this.storeAreaDefaultData.cityName = this.formData.cityName || '';
      this.storeAreaDefaultData.district = this.formData.district || '';
      this.storeAreaDefaultData.districtName = this.formData.districtName || '';
      if (this.formData.legalIdnumExpireStart) {
        this.legalIdnumExpireStartValue = moment(this.formData.legalIdnumExpireStart).format('YYYY-MM-DD');
      }
      if (this.formData.licenseExpireStart) {
        this.licenseExpireStartValue = moment(this.formData.licenseExpireStart).format('YYYY-MM-DD');
      }
      if (this.formData.licenseType == 2 || this.formData.licenseType == 0) {
        this.formData.licenseType = '0';
      }

      this.namePlaceholder = "请填写" + this.principalNameLb(this.formData.merchantType) + "姓名";
      this.idCardPlaceholder = "请填写" + this.principalNameLb(this.formData.merchantType) + "身份证号";
      this.momentAnchor('licenseExpireStart', this.formData.licenseExpireStart);
      this.momentAnchor('legalIdnumExpireStart', this.formData.legalIdnumExpireStart);
      this.anchor('legalIdnumExpire', this.formData.legalIdnumExpire, this.legalIdnumExpire.data);
      this.anchor('licenseExpire', this.formData.licenseExpire, this.licenseExpire.data);
      this.anchor('merchantType', this.formData.merchantType, this.merchantType.data);
      this.anchor('licenseType', this.formData.licenseType, this.licenseType.data);
    },
    momentAnchor(key, val) {
      this[key].anchor = [];
      const year = moment(val).format('YYYY');
      const mouth = moment(val).format('MM');
      const days = moment(val).format('DD');
      this[key].anchor = [year - 1900, mouth - 1, days - 1];
    },
    anchor(key, val, data) {
      this[key].anchor = [];
      data.map((item, index) => {
        if (item.key == val) {
          this[key].anchor.push(index)
        }
      })
    },
    mccAnchor(key, val, data) {
      this[key].anchor = [];
      let mccData = data;
      const mccRoute = val.split(',');
      const mccRouteIndex = mccRoute.length;
      const fn = (val, data) => {
        for (let i = 0; i < data.length; i++) {
          if (val == data[i].key) {
            this[key].anchor.push(i)
            if (data[i].children) {
              mccData = data[i].children;
            } else {
              mccData = [];
            }
          }
        }
      }
      if (mccRouteIndex > 0) {
        for (let i = 0; i < mccRouteIndex; i++) {
          fn(mccRoute[i], mccData)
        }
      }
    },
    // 获取公共枚举数据
    loadInitData() {
      CommonUtil.getDictData().then(response => {
        if (response && response.success) {
          if (response.resultObject) {
            let resultObject = response.resultObject;
            // 业务线
            resultObject.businessLineType.map((item) => {
              if (this.initialData.businessLine == item.code) {
                this.$set(this.formData, "businessLineText", item.name);
              }
            });
          } else {
            Toast(response.msg);
          }
        } else {
          if (response.code > 0 && response.msg) {
            Toast(response.msg);
          } else {
            Toast("字典数据错误");
          }
        }
      });
    },
    //经营类目
    getMccData(type) {
      this.mccVisible = false;
      this.ajax({
        type: "get",
        url: "/merchant/dic/categories.do?merchantType=" + this.formData.merchantType + "&businessLine=" + this.initialData.businessLine,
        controlLoading: false
      })
        .then((response) => {
          if (response && response.success) {
            if (type == 'repeat') {
              this.formData.mcc = '';//经营类目
              this.formData.mccName = '';//经营类目名称
              this.formData.mccRout = '';
              this.mcc.anchor = [];
            };
            const mccData = response.resultObject.children;
            //对经营类目进行数据处理
            this.mcc.data = this.resetMccData(mccData);
            this.mccVisible = true;
            if (this.formData.mccRout) {
              const mccRout = this.formData.mccRout.split(',');
              this.mccSpliceName = this.showIdName(this.mcc.data, mccRout[0]) + " - " + this.showIdName(this.mcc.data, mccRout[1]);
              this.mccAnchor('mcc', this.formData.mccRout, this.mcc.data);
            }
            //else {
            //   if (mccData[0]) {
            //     if (mccData[0].children.length) {
            //       this.formData.mcc = mccData[0].children[0].id;
            //       this.formData.mccName = mccData[0].children[0].label;
            //       this.formData.mccRout = mccData[0].id + ',' + mccData[0].children[0].id;
            //       this.mccSpliceName = mccData[0].label + '-' + mccData[0].children[0].label;
            //     } else {
            //       this.formData.mcc = mccData[0].id;
            //       this.formData.mccName = mccData[0].label;
            //       this.formData.mccRout = mccData[0].id;
            //       this.mccSpliceName = mccData[0].label;
            //     }
            //   } else {
            //     Toast("获取经营类目失败");
            //   }
            // }
          } else {
            Toast("加载经营类目失败");
          }
        })
        .catch((err) => {
          // MessageBox.alert("获取数据异常，请稍候重试").then(action => {
          //   this.$router.push({ path: "/storeManage",query: CommonUtil.concatSessionId({}) });
          // });
        });
    },
    //经营类目数据处理
    resetMccData(data) {
      const newData = data;
      const restData = (datas) => {
        datas.map((item, index) => {
          const key = item.id;
          item.key = key;
          item.value = item.label;
          if (item.children.length > 0 && item.children) {
            restData(item.children)
          } else {
            delete item.children
          }
        })
      }
      restData(newData);
      return newData
    },
    //选择图片的方式本地相册或者拍照,如果传ocr需要进行ocr图像识别
    repeatImgUrl(url) {
      return CommonUtil.imgUrlFormate(url)
    },
    chooseImg: function (type, ocr) {
      var _this = this;
      _this.actions = [
        {
          name: "拍照",
          method: function () {
            jsBridge.selectPicture(
              { options: "拍照", noCrop: true, compress: { sizeLimit: "1", unit: "M" } },
              function (result) {
                _this.doUploadPic(type, result, ocr);
              },
              function (result) {
              }
            );
          }
        },
        {
          name: "选择图片",
          method: function () {
            jsBridge.selectPicture(
              {
                options: "选择图片",
                noCrop: true,
                compress: { sizeLimit: "1", unit: "M" }
              },
              function (result) {
                _this.doUploadPic(type, result, ocr);
              },
              function (result) {
              }
            );
          }
        }
      ];

      this.chooseImgVisible = true;
      return false;
    },
    //删除图片
    delImage(key) {
      this.formData[key] = "";
    },
    //查看示例图
    lookFigure(text, imgUrl) {
      MessageBox.close(false);
      MessageBox({
        title: '',
        message: `<div class='figureImg'><img src="${imgUrl}" /></div><div class='figureText'><p>${text}</p></div>`,
        confirmButtonText: '知道了',
        closeOnClickModal: false
      });
    },
    showImg: function (url) {
      let urlArr = [];
      urlArr.push(CommonUtil.imgUrlFormate(url))
      try {
        jsBridge.viewPicture(
          { files: urlArr },
          function (params) {

          }
        );
      } catch (e) {
        Toast("预览失败");
      }
    },
    //上传图片到服务器
    doUploadPic: function (type, result, ocr) {
      //有在用商户号，且是非直连通道 不支持ocr
      //补充进件 不支持ocr
      if(this.initialData.isEntryStatus == 1 || this.query['rateToOpenPay']){
        ocr = ''
      };
      var serverUrl = window.APP.serverUrl;
      var url = "image/upload.do";
      let params = {};
      if (ocr == 'ocr_business_license') {
        url = "image/ocr.do";//ocr识别上传地址
        params.imgOcrType = 'ocr_business_license';
        params.sessionId = window.APP.sessionId;
        params.sessionid = window.APP.sessionId;
      }
      //身份证正面ocr
      if (ocr == 'ocr_idcard_front') {
        url = "image/ocr.do";//ocr识别上传地址
        params.imgOcrType = 'ocr_idcard';
        params.cardSide = 'front';
      }
      //身份证反面ocr
      if (ocr == 'ocr_idcard_back') {
        url = "image/ocr.do";//ocr识别上传地址
        params.imgOcrType = 'ocr_idcard';
        params.cardSide = 'back';
      }
      jsBridge.doUploadPic(
        {
          url: url,
          file: result.resultObject,
          data: params,
          //限制图片压缩后的大小最大1.2M
          compress: { sizeLimit: "1", unit: "M" }
        },
        (result) => {
          //以下为正常的业务逻辑
          if (result && result.success) {
            var uploadResult = result.resultObject.imageUrl || result.resultObject;
            if (uploadResult) {
              var url = uploadResult;
              if (typeof (this.formData[type]) == 'string' || this.formData[type] == null) {
                this.formData[type] = url;
              }
              if (typeof (this.formData[type]) == 'object') {
                this.formData[type].push(url);
              }
            }
            var resultObject = result.resultObject;
            if (ocr) {
              if (resultObject.ocrSuccess && Object.keys(JSON.parse(resultObject.ocrResult)).length != 0) {
                let ocrData = JSON.parse(resultObject.ocrResult);//ocr识别出的数据
                const formData = this.formData;//表单填写的数据
                //识别营业执照
                if (ocr == 'ocr_business_license') {
                  let flag = false;
                  let messageText = "";
                  //公司全称
                  if (!formData.merchantCompany || formData.merchantCompany == ocrData.name) {
                    this.formData.merchantCompany = ocrData.name;
                  } else {
                    if (ocrData.name) {
                      flag = true;
                      messageText = messageText + "<div style='display:flex'><div>" + "公司全称：</div><div style='flex:1;word-wrap:break-word;word-break:break-all'>" + ocrData.name + "</div></div>";
                    }
                  }
                  //营业执照注册号
                  if (!formData.bussAuthNum || formData.bussAuthNum == ocrData.regNum) {
                    this.formData.bussAuthNum = ocrData.regNum;
                  } else {
                    if (ocrData.regNum) {
                      flag = true;
                      messageText = messageText + "<div style='display:flex'><div>" + "营业执照注册号：</div><div style='flex:1;word-wrap:break-word;word-break:break-all'>" + ocrData.regNum + "</div></div>";
                    }
                  }
                  //营业执照注册地址
                  if (!formData.yzLicenseRegisterAddress || formData.yzLicenseRegisterAddress == ocrData.address) {
                    this.formData.yzLicenseRegisterAddress = ocrData.address;
                  } else {
                    if (ocrData.address) {
                      flag = true;
                      messageText = messageText + "<div style='display:flex'><div>" + "营业执照注册地址：</div><div style='flex:1;word-wrap:break-word;word-break:break-all'>" + ocrData.address + "</div></div>";
                    }
                  }
                  //营业执照有效期
                  let establishDate = ocrData.establishDate ? ocrData.establishDate : '';//ocr返回的是‘20190101’转换成‘2019-01-02’格式
                  let validPeriod = ocrData.validPeriod ? ocrData.validPeriod : '';
                  const startYear = moment(establishDate.replace(/-/g, "/")).format('YYYY');
                  const endYear = moment(validPeriod.replace(/-/g, "/")).format('YYYY');
                  let difference = endYear - startYear;
                  if (difference <= 0) {
                    validPeriod = '';
                  };
                  //判断 如果ocr识别出来的日期不在下拉枚举中不去赋值
                  let endDateFlag = false;
                  this.licenseExpire.data.map((item) => {
                    if (item.key == difference || difference > 70) {
                      endDateFlag = true
                    }
                  })
                  if (endDateFlag) {
                    if ((!formData.licenseExpireStart || formData.licenseExpireStart == establishDate) && (!formData.licenseExpire || formData.licenseExpire == (validPeriod == '2999-12-31' ? '29991231' : difference))) {
                      if (establishDate && validPeriod) {
                        this.formData.licenseExpireStart = establishDate;//起始时间
                        if (difference > 70) {
                          this.formData.licenseExpire = '29991231';//结束时间
                          validPeriod = '29991231';
                        } else {
                          this.formData.licenseExpire = difference;
                          validPeriod = difference;
                        }
                      } else {
                        this.formData.licenseExpireStart = '';//起始时间
                        this.formData.licenseExpire = '';//结束时间
                      }
                    } else {
                      if (establishDate && validPeriod) {
                        flag = true;
                        if (difference > 70) {
                          validPeriod = '29991231';//结束时间
                        } else {
                          validPeriod = difference;
                        }
                        messageText = messageText + "<div style='display:flex'><div>" + "营业执照有效期：</div><div style='flex:1;word-wrap:break-word;word-break:break-all'>" + establishDate + " 至 " + (validPeriod == '29991231' ? '长期' : (difference + '年')) + "</div></div>";
                      }
                    }
                    this.ocrData.licenseExpireStartOcr = establishDate || '';//公司注册日期
                    this.ocrData.licenseExpireOcr = validPeriod;//营业期限终止日期
                  }
                  this.ocrData.businessLicenseOcr = ocrData.regNum || '';//注册号
                  this.ocrData.licenseRegisterAddressOcr = ocrData.address || '';//注册地址
                  this.ocrData.companyNameOcr = ocrData.name || '';//公司名称
                  this.ocrData.businessOperatorNameOcr = ocrData.person || '';//公司法人
                  this.ocrData.businessTypeOcr = ocrData.type || '';//公司类型
                  this.ocrData.businessAddressOcr = ocrData.address || '';//公司地址
                  this.ocrData.businessCapitalOcr = ocrData.capital || '';//注册资本
                  this.ocrData.businessOcr = ocrData.business || '';//经营范围
                  if (flag) {
                    this.checkOrcReturn(messageText, 'ocr_business_license');
                  }
                };
                //身份证正面
                if (ocr == 'ocr_idcard_front') {
                  let flag = false;
                  let messageText = "";
                  if (!formData.principalCertno || formData.principalCertno == ocrData.num) {
                    this.formData.principalCertno = ocrData.num;
                  } else {
                    if (ocrData.num) {
                      flag = true;
                      messageText = messageText + "<div style='display:flex'><div>" + "身份证号：</div><div style='flex:1;word-wrap:break-word;word-break:break-all'>" + ocrData.num + "</div></div>";
                    }
                  }
                  if (!formData.principalPerson || formData.principalPerson == ocrData.name) {
                    this.formData.principalPerson = ocrData.name;
                  } else {
                    if (ocrData.name) {
                      flag = true;
                      messageText = messageText + "<div style='display:flex'><div>" + this.principalNameLb(this.formData.merchantType) + "姓名：</div><div style='flex:1;word-wrap:break-word;word-break:break-all'>" + ocrData.name + "</div></div>";
                    }
                  }
                  this.ocrData.idcardOcr = ocrData.num || '';//身份证号
                  this.ocrData.idcardNameOcr = ocrData.name || '';//姓名
                  this.ocrData.idcardNationalityOcr = ocrData.nationality || '';//民族
                  this.ocrData.idcardSexOcr = ocrData.sex || '';//性别
                  this.ocrData.idcardBirthOcr = ocrData.birth || '';//出生日期
                  this.ocrData.idcardAddressOcr = ocrData.address || '';//地址信息
                  if (flag) {
                    this.checkOrcReturn(messageText, 'ocr_idcard_front');
                  }
                };
                //身份证反面
                if (ocr == 'ocr_idcard_back') {

                  let flag = false;
                  let messageText = "";
                  //身份证有效期
                  let startDate = ocrData.startDate ? ocrData.startDate : '';//ocr返回的是‘20190101’转换成‘2019-01-02’格式
                  let endDate = ocrData.endDate ? ocrData.endDate : '';
                  const startYear = moment(startDate.replace(/-/g, "/")).format('YYYY');
                  const endYear = moment(endDate.replace(/-/g, "/")).format('YYYY');
                  let difference = endYear - startYear;
                  if (difference <= 0) {
                    endDate = '';
                  };
                  let differenceFlag = false;
                  this.legalIdnumExpire.data.map((item) => {
                    if (difference <= 20) {
                      if (item.key == difference) {
                        differenceFlag = true;
                      }
                    } else {
                      differenceFlag = true;
                    }
                  });
                  if (!differenceFlag) {
                    endDate = '';
                  };
                  if ((!formData.legalIdnumExpireStart || formData.legalIdnumExpireStart == startDate) && (!formData.legalIdnumExpire || formData.legalIdnumExpire == (endDate == '2999-12-31' ? '29991231' : difference))) {
                    if (startDate && endDate) {
                      this.formData.legalIdnumExpireStart = startDate;//起始时间
                      if (difference > 20) {
                        this.formData.legalIdnumExpire = '29991231';//结束时间
                        endDate = '29991231';
                      } else {
                        this.formData.legalIdnumExpire = difference;
                        endDate = difference;
                      }
                    } else {
                      this.formData.legalIdnumExpireStart = '';//起始时间
                      this.formData.legalIdnumExpire = '';//结束时间
                    }
                  } else {
                    if (startDate && endDate) {
                      flag = true;
                      if (difference > 20) {
                        endDate = '29991231';//结束时间
                      } else {
                        endDate = difference;
                      }
                      messageText = messageText + "<div style='display:flex'><div>" + "身份证有效期：</div><div style='flex:1;word-wrap:break-word;word-break:break-all'>" + startDate + " 至 " + (endDate == '29991231' ? '长期' : (difference + '年')) + "</div></div>";
                    }
                  };
                  this.ocrData.idcardValidStartDateOcr = startDate || '';//有效期起始时间
                  this.ocrData.idcardValidEndDateOcr = endDate;//有效期结束时间
                  this.ocrData.idcardIssueOcr = ocrData.issue || '';//签发机关
                  if (flag) {
                    this.checkOrcReturn(messageText, 'ocr_idcard_back');
                  }
                };
              } else {
                MessageBox.close(false);
                MessageBox({
                  title: '提示',
                  message: '无法识别图片中的内容，通常是由于图片模糊不清造成，建议更换清晰图片',
                  confirmButtonText: '知道了',
                  closeOnClickModal: false
                });
              }
            }
            return;
          }
          var msg = result.msg || "上传失败";
          Toast(msg);
        },
        function (result) {

        }
      );
    },
    //ocr图像识别
    checkOrcReturn(messageText, ocr) {
      MessageBox.close(false);
      MessageBox({
        title: '是否覆盖已有内容',
        message: `<div style="text-align:left">${messageText}</div>`,
        confirmButtonText: '是',
        cancelButtonText: '否',
        showCancelButton: true
      }).then((action) => {
        if (action == 'confirm') {
          if (ocr == 'ocr_business_license') {
            this.formData.bussAuthNum = this.ocrData.businessLicenseOcr || '';//注册号
            this.formData.yzLicenseRegisterAddress = this.ocrData.licenseRegisterAddressOcr || '';//注册地址
            this.formData.merchantCompany = this.ocrData.companyNameOcr || '';//公司名称
            if (this.ocrData.licenseExpireStartOcr && this.ocrData.licenseExpireOcr) {
              this.formData.licenseExpireStart = this.ocrData.licenseExpireStartOcr || '';//公司注册日期
              this.formData.licenseExpire = this.ocrData.licenseExpireOcr || '';//营业期限终止日期
            }
            //this.formData.principalPerson = this.ocrData.principalPersonOcr || '';//公司法人
          }
          if (ocr == 'ocr_idcard_front') {
            this.formData.principalCertno = this.ocrData.idcardOcr || '';//身份证号
            this.formData.principalPerson = this.ocrData.idcardNameOcr || '';
          }
          if (ocr == 'ocr_idcard_back') {
            if (this.ocrData.idcardValidStartDateOcr && this.ocrData.idcardValidEndDateOcr) {
              this.formData.legalIdnumExpireStart = this.ocrData.idcardValidStartDateOcr || '';//有效期起始时间
              this.formData.legalIdnumExpire = this.ocrData.idcardValidEndDateOcr || '';//有效期结束时间
            }
          }
          if (ocr == 'ocr_bankcard') {
            this.formData.bankCardNo = this.ocrData.bankCardNoOcr || '';//银行卡账号
          }
        }
      })
    },
    //下拉控件
    showPicker(ref) {
      this.$refs[ref].show();

    },
    selectAreaPickerOk(data) {
      this.formData = Object.assign(this.formData, data);
      this.storeAreaDefaultData.province = this.formData.province || '';
      this.storeAreaDefaultData.provinceName = this.formData.provinceName || '';
      this.storeAreaDefaultData.city = this.formData.city || '';
      this.storeAreaDefaultData.cityName = this.formData.cityName || '';
      this.storeAreaDefaultData.district = this.formData.district || '';
      this.storeAreaDefaultData.districtName = this.formData.districtName || '';
    },
    principalNameLb(key) {
      let keys = {
        '03': '法人',
        '02': '法人', // '02': '经营者',
        '01': '申请者',
      }
      return keys[key] || '法人';
      // switch (key) {
      //   case '03':
      //     return '法人';
      //     break;
      //   case '02':
      //     return '经营者';
      //     break;
      //   case '01':
      //     return '申请者';
      //     break;
      //   default:
      //     return '法人'
      // }
    },
    //弹窗选择回掉赋值
    handleConfirm(key, v, data) {
      const handleSelectValue = v[0].value;
      const merchantTypeInputText = this.showIdName(this.merchantType.data, this.formData.merchantType);
      this.handleSelectKey = this.showKey(this.merchantType.data, v[0].value);
      if (key == 'merchantType' && handleSelectValue != merchantTypeInputText) {
        // if (this.getIdToIndex(data, v)[0].key == '01') {
        this.formData.yzLicensePhoto = '';//营业执照照片
        this.formData.merchantCompany = '';//公司全称
        this.formData.bussAuthNum = '';//营业执照注册号
        this.formData.yzLicenseRegisterAddress = '';//营业执照注册地址
        this.formData.licenseExpireStart = '';//营业执照有效期开始时间
        this.formData.licenseExpire = '';//营业执照有效期年限
        this.formData.licenseType = '';//是否三证合一
        this.formData.yzImgTaxReg = '';//税务登记证照片
        this.formData.yzPrgPhoto = '';//组织机构代码证照片
        this.namePlaceholder = "请填写" + this.principalNameLb(this.handleSelectKey) + "姓名";
        this.idCardPlaceholder = "请填写" + this.principalNameLb(this.handleSelectKey) + "身份证号";
        // }
        this[key].anchor = [v[0].index];
        this.formData[key] = this.getId(data, v[v.length - 1].value, v.length);
        this.getMccData('repeat');
      }
      if (key == 'licenseType') {
        this.formData.yzImgTaxReg = '';//税务登记证照片
        this.formData.yzPrgPhoto = '';//税务登记证照片
      }
      if (key == 'mcc') {
        const mccData = this.getIdToIndex(data, v);
        this.mccSpliceName = v[0].value + (v[1] ? ' - ' : '') + (v[1] ? v[1].value : '');
        this.formData.mcc = mccData[1].key;
        this.formData.mccName = v[1].value;
        this.formData.mccRout = mccData[0].key + ',' + mccData[1].key;
        this[key].anchor = [v[0].index, v[1].index];
        return
      }
      this[key].anchor = [v[0].index];
      this.formData[key] = this.getId(data, v[v.length - 1].value, v.length);
    },
    changeMoment(date) {
      return moment(date).format('YYYY-MM-DD')
    },
    //有效期弹窗
    showPeriod(key, label, v) {
      this.$refs[key].show ? this.$refs[key].show() : this.$refs[key].open();
      if (v) {
        this.formData[label] = moment(v).format('YYYY-MM-DD');
      }
    },
    //选择使用年限
    periodConfirm(key, v, data, startTime) {
      let diffVal = this.getId(data, v[0].value, 1);
      this.formData[key] = diffVal
    },
    //不选使用年限清空有效期
    periodCancel(key) {
      this.formData[key] = "";
    },
    getIdToIndex(data, indexArr) {
      const lev = indexArr.length;
      let n = 0;
      let res = [];
      const getData = (datas) => {
        n = n + 1;
        if (n == lev) {
          res.push(datas[indexArr[n - 1].index]);
        } else {
          res.push(datas[indexArr[n - 1].index]);
          getData(datas[indexArr[n - 1].index].children);
        }
      }
      getData(data)
      return res;
    },
    //根据value获取key
    getId(data, val, lev) {
      if (lev == 1) {
        for (let i = 0; i < data.length; i++) {
          if (data[i].value == val) {
            return data[i].key || data[i].id;
          }
        }
      }
      if (lev == 2) {
        for (let i = 0; i < data.length; i++) {
          for (let j = 0; j < data[i].children.length; j++) {
            let lev2Data = data[i].children[j]
            if (lev2Data.value == val) {
              return lev2Data.key || lev2Data.id;
            }
          }
        }
      }
      if (lev == 3) {
        for (let i = 0; i < data.length; i++) {
          for (let j = 0; j < data[i].children.length; j++) {
            let lev2Data = data[i].children[j]
            for (let n = 0; n < lev2Data.children.length; n++) {
              let lev3Data = lev2Data.children[n];
              if (lev3Data.value == val) {
                return lev3Data.key || lev3Data.id;
              }
            }
          }
        }
      }
      return
    },
    //根据枚举展示字段名字
    showIdName(data, key) {
      let name = '';
      const checkName = (datas, keys) => {
        for (let i = 0; i < datas.length; i++) {
          if (datas[i].key == keys) {
            name = datas[i].value;
            return
          }
          if (datas[i].children) {
            checkName(datas[i].children, keys)
          }
        }
      }
      checkName(data, key)
      return name
    },
    //根据名字展示对应key
    showKey(data, value) {
      let name = "";
      for (let i = 0; i < data.length; i++) {
        if (data[i].value == value) {
          return data[i].key;
        }
      }
      return "";
    },
    //验重
    checkRepeat() {
      this.ajax({
        type: "get",
        url: "/merchant/info/verify/name.do?merchantName=" + this.formData.merchantName,
        controlLoading: false
      })
        .then((response) => {
          if (response && response.success) {
            if (response.resultObject) {
              Toast('商户名称重复!')
            } else {
              Toast('商户名称可用!')
            }

          } else {
            Toast(response.msg)
          }
        })
        .catch((err) => {

        });
    },
    fieldValidate(fieldName) {
      if (fieldName == 'merchantName') {
        if (!this.formData.merchantName) {
          Toast("请填写商户名称");
          return
        };
        if (!/^[\u4e00-\u9fa5a-zA-Z0-9()（）]+$/.test(this.formData.merchantName)) {
          Toast("商户名称仅可填写汉字,字母,数字,中英文括号");
          return
        };
      };
      if (fieldName == 'alias') {
        if (!this.formData.alias) {
          Toast("请填写门店简称");
          return
        };
        if (!/^[\u4e00-\u9fa5a-zA-Z0-9()（）]+$/.test(this.formData.alias)) {
          Toast("门店简称仅可填写汉字,字母,数字,中英文括号");
          return
        };
      };
      if (fieldName == 'principalMobile') {
        if (!this.formData.principalMobile) {
          Toast("请填写手机号");
          return
        };
        if (!/^1[0-9]{10}$/.test(this.formData.principalMobile)) {
          Toast("请填写正确的手机号码");
          return
        };
      };
      if (fieldName == 'servicePhoneNo') {
        if (!this.formData.servicePhoneNo) {
          Toast("请填写客服电话");
          return
        };
        if (!/^1[0-9]{10}$/.test(this.formData.servicePhoneNo)) {
          Toast("请填写正确的客服电话");
          return
        };
      };
      if (fieldName == 'email') {
        if (!this.formData.email) {
          Toast("请填写邮箱");
          return
        };
        if (!(/^([0-9A-Za-z\-_\.]+)@([0-9a-z]+\.[a-z]{2,3}(\.[a-z]{2})?)$/g).test(this.formData.email)) {
          Toast("请填写合法的邮箱");
          return
        };
      };
      if (fieldName == 'address') {
        if (!this.formData.address) {
          Toast("请填写门店地址");
          return
        };
      };
      if (fieldName == 'merchantCompany') {
        if (!this.formData.merchantCompany) {
          Toast("请填写公司全称");
          return
        };
        /* if (!/^[\u4e00-\u9fa50-9a-zA-Z()（）]+$/.test(this.formData.merchantCompany)) {
          Toast("公司全称仅可填写汉字,字母,数字,中英文括号&不能纯数字");
          return
        }; */
        if (!/^[\u4e00-\u9fa5a-zA-Z0-9_()（）.·*，,-]+$/.test(this.formData.merchantCompany)) {
          Toast("公司全称仅可填写汉字,大小写字母,数字,中英文括号，中英文逗号，星号，英文句号，下划线，中杠，间隔号");
          return
        };
      };
      if (fieldName == 'bussAuthNum') {
        if (!this.formData.bussAuthNum) {
          return
        };
        if (!/^([0-9a-zA-Z]{18}|[0-9a-zA-Z]{15})$/.test(this.formData.bussAuthNum)) {
          Toast("营业执照注册号仅可填写15或者18位数字、字母");
          return
        };
      };
      if (fieldName == 'yzLicenseRegisterAddress') {
        if (!this.formData.yzLicenseRegisterAddress) {
          Toast("请填写营业执照注册地址");
          return
        };
      };
      if (fieldName == 'principalPerson') {
        if (!this.formData.principalPerson) {
          Toast("请填写姓名");
          return
        };
        if (!/^[\u4e00-\u9fa50-9a-zA-Z.·]+$/.test(this.formData.principalPerson)) {
          Toast("姓名仅可填写数字,字母,中文,中文·和英文.");
          return
        };
      };
      if (fieldName == 'principalCertno') {
        if (!this.formData.principalCertno) {
          Toast("请输入身份证号码");
          return
        }
        var test = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$/;
        var reg = /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
        if (!reg.test(this.formData.principalCertno) && !test.test(this.formData.principalCertno)) {
          Toast("请输入正确的身份证号码");
          return
        }
      };
    },
    checkData() {
      if (!this.formData.yzShopPhoto) {
        Toast("请上传门头照");
        return false;
      };
      if (!this.formData.yzCheckstandPic) {
        Toast("请上传收银台照");
        return false;
      };
      if (!this.formData.yzIndoorPic) {
        Toast("请上传内景照");
        return false;
      };
      if (!this.formData.merchantName) {
        Toast("请填写商户名称");
        return false;
      };
      if (!/^[\u4e00-\u9fa5a-zA-Z0-9()（）]+$/.test(this.formData.merchantName)) {
        Toast("商户名称仅可填写汉字,字母,数字,中英文括号");
        return false;
      };
      if (!this.formData.alias) {
        Toast("请填写门店简称");
        return false;
      };
      if (!/^[\u4e00-\u9fa5a-zA-Z0-9()（）]+$/.test(this.formData.alias)) {
        Toast("门店简称仅可填写汉字,字母,数字,中英文括号");
        return false;
      };
      if (!this.formData.mcc || !this.formData.mccName || !this.formData.mccRout) {
        Toast("请选择经营类目");
        return false;
      }
      if (!this.formData.principalMobile) {
        Toast("请填写手机号");
        return false;
      };
      if (!/^1[0-9]{10}$/.test(this.formData.principalMobile)) {
        Toast("请填写正确的手机号码");
        return false;
      };
      if (!this.formData.servicePhoneNo) {
        Toast("请填写客服电话");
        return false;
      };
      if (!/^1[0-9]{10}$/.test(this.formData.servicePhoneNo)) {
        Toast("请填写正确的客服电话");
        return false;
      };
      if (!this.formData.email) {
        Toast("请填写邮箱");
        return false;
      };
      if (!(/^([0-9A-Za-z\-_\.]+)@([0-9a-z]+\.[a-z]{2,3}(\.[a-z]{2})?)$/g).test(this.formData.email)) {
        Toast("请填写合法的邮箱");
        return false;
      };
      if (!this.formData.province || !this.formData.city || !this.formData.district || !this.formData.provinceName || !this.formData.cityName || !this.formData.districtName) {
        Toast("请选择所属地区");
        return false;
      };
      if (!this.formData.address) {
        Toast("请填写门店地址");
        return false;
      };
      if (!this.formData.merchantType) {
        Toast("请选择商户类型");
        return false;
      };
      if (this.formData.merchantType != '01') {
        if (!this.formData.yzLicensePhoto) {
          Toast("请上传营业执照照片");
          return false;
        }
        if (!this.formData.merchantCompany) {
          Toast("请填写公司全称");
          return false;
        };
        if (!/^[\u4e00-\u9fa5a-zA-Z0-9_()（）.·*，,-]+$/.test(this.formData.merchantCompany)) {
          Toast("公司全称仅可填写汉字,大小写字母,数字,中英文括号，中英文逗号，星号，英文句号，下划线，中杠，间隔号");
          return false;
        };
        /* if (!/^[\u4e00-\u9fa50-9a-zA-Z()（）]+$/.test(this.formData.merchantCompany)) {
          Toast("公司全称不允许包含特殊符号");
          return false;
        };
        if (!/^(?!\d+$)[\d\u4e00-\u9fa50-9a-zA-Z()（）]+$/.test(this.formData.merchantCompany)) {
          Toast("公司全称不能是纯数字");
          return false;
        }; */
        if (!this.formData.bussAuthNum) {
          Toast("请填写营业执照注册号");
          return
        };
        if (!/^([0-9a-zA-Z]{18}|[0-9a-zA-Z]{15})$/.test(this.formData.bussAuthNum)) {
          Toast("营业执照注册号仅可填写15或者18位数字、字母");
          return
        };
        if (!this.formData.yzLicenseRegisterAddress) {
          Toast("请填写营业执照注册地址");
          return
        };
        if (!this.formData.licenseExpireStart && !this.formData.licenseExpire) {
          Toast("请选择营业执照有效期");
          return false;
        }
        if (!this.formData.licenseType) {
          Toast("请选择是否三证合一");
          return false;
        };
        if (this.formData.licenseType == '0') {
          if (!this.formData.yzImgTaxReg) {
            Toast("请上传税务登记证");
            return false;
          }
          if (!this.formData.yzPrgPhoto) {
            Toast("请上传组织机构代码证");
            return false;
          }
        }
      };
      if (!this.formData.yzCertPhotoa) {
        Toast("请上传身份证国徽面照片");
        return false;
      }
      if (!this.formData.yzCertPhotob) {
        Toast("请上传身份证头像面照片");
        return false;
      }
      if (this.formData.merchantType == '01') {
        if (!this.formData.yzImgIdcardHolding) {
          Toast("请上传手持身份证照");
          return false;
        }
      }
      if (!this.formData.principalPerson) {
        Toast("请填写姓名");
        return false;
      };
      if (!/^[\u4e00-\u9fa50-9a-zA-Z.·]+$/.test(this.formData.principalPerson)) {
        Toast("姓名仅可填写数字,字母,中文,中文·和英文.");
        return false;
      };
      if (!this.formData.principalCertno) {
        Toast("请输入身份证号码");
        return false;
      }
      var test = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$/;
      var reg = /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
      if (!reg.test(this.formData.principalCertno) && !test.test(this.formData.principalCertno)) {
        Toast("请输入正确的身份证号码");
        return false;
      }
      if (!this.formData.legalIdnumExpireStart && !this.formData.legalIdnumExpire) {
        Toast("请选择身份证有效期");
        return false;
      }
      return true
    },
    //下一步
    submit() {
      //我注销的
      // if (!this.checkData()) {
      //   return
      // };
      this.$emit("nextStep", 1);
    },
  },
  components: {
    inputClear,
    selectAreaPicker
  }
};
</script>
<style lang='scss' scoped>
@import "./openPayment.scss";
@import './openPay.scss'
</style>
